<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.editState.visible"
            :title="api.editState.title"
            destroy-on-close
            width="1200"
            @close="api.onCloseEdit()"
    >
        <el-space class="mb-3">
            <el-button plain type="primary" @click="addField">增加字段</el-button>
        </el-space>

        <el-form
                ref="formRef"
                :model="api.editState.form"
                :rules="rules"
                label-width="80px"
                status-icon
        >

            <el-table
                    :data="api.editState.form.voFields"
                    border
            >

                <el-space class="mb-3">
                    <el-button plain type="primary" @click="addField">增加字段</el-button>
                </el-space>

                <el-table-column label="字段名称" prop="name">
                    <template #default="{ row, column, $index }">
                        <el-input
                                v-if="api.editState.form.voFields"
                                v-model="api.editState.form.voFields[$index].name"
                                clearable
                                placeholder="名称"
                        />
                    </template>
                </el-table-column>

                <el-table-column label="绑定类型" prop="bindName">
                    <template #default="{ row, column, $index }">

                        <el-select
                                v-if="api.editState.form.voFields"
                                v-model="api.editState.form.voFields[$index].bindName"
                                class="fill-width"
                                clearable
                                @change="(e)=>onBindNameChange(api.editState.form.voFields?.[$index],e)"
                        >
                            <el-option
                                    v-for="item in state.bindType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column
                        label="entity"
                        prop="entity"
                >
                    <template #default="{ row, column, $index }">
                        <div v-if="api.editState.form.voFields">
                            <el-select
                                    v-if="api.editState.form.voFields[$index].bindName == 'BindDict'"
                                    v-model="api.editState.form.voFields[$index].entity"
                                    class="fill-width"
                            >
                                <el-option
                                        v-for="item in state.dicts"
                                        :key="item.value"
                                        :label="<any>item.label"
                                        :value="item.value"
                                />
                            </el-select>

                            <el-select
                                    v-if="api.editState.form.voFields[$index].bindName != 'BindDict'"
                                    v-model="api.editState.form.voFields[$index].entity"
                                    class="fill-width"
                                    @change="(e)=>onEntitySelect(api.editState.form.voFields?.[$index],e)"
                            >
                                <el-option
                                        v-for="item in api.tableState.dataSource"
                                        :key="item.id"
                                        :label="<any>item.className"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>

                        </div>

                    </template>
                </el-table-column>

                <el-table-column label="绑定字段" prop="field" width="160">
                    <template #default="{ row, column, $index }">
                        <div v-if="api.editState.form.voFields">
                            <el-select
                                    v-if="api.editState.form.voFields[$index].bindName == 'BindField' || api.editState.form.voFields[$index].bindName == 'BindFieldList'"
                                    v-model="api.editState.form.voFields[$index].field"
                                    class="fill-width"
                                    @change="(e)=>onFieldChange(api.editState.form.voFields[$index],e)"
                            >
                                <el-option
                                        v-for="item in state.fields"
                                        v-if="state.fields.length>0"
                                        :key="item.commentName"
                                        :label="<any>item.commentName"
                                        :value="item.commentName"
                                />
                            </el-select>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="condition" prop="conditionValue" width="300">
                    <template #default="{ row, column, $index }">
                        <el-input
                                v-if="api.editState.form.voFields"
                                v-model="api.editState.form.voFields[$index].conditionValue"
                                clearable
                                placeholder="condition"
                        />
                    </template>
                </el-table-column>

                <el-table-column align="center" label="删除" prop="action" width="70">
                    <template #default="{ row, column, $index }">
                        <el-button
                                size="small"
                                text
                                type="danger"
                                @click="onDeleteField($index)"
                        >
                            <template #icon>
                                <el-icon>
                                    <Delete/>
                                </el-icon>
                            </template>
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-form-item class="mb-0 mt-4" label-width="0">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="api.onCloseEdit()">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import {GenTableApi} from "~/api/system/gen/gen.api";
import {reactive, ref} from "vue";
import {FormRules} from "element-plus";
import {GenVoField} from "~/api/system/gen/types";
import {AttachMore} from "~/api/types";
import {Delete} from "@element-plus/icons-vue";

interface Props {
    api: GenTableApi;
}

const formRef = ref();
const {api} = withDefaults(defineProps<Props>(), {});
const rules = reactive<FormRules>({
    packageName: [{required: true, message: "请输入包路径", trigger: "blur"}],
    tableName: [{required: true, message: "请输入表名", trigger: "blur"}],
    tableComment: [{required: true, message: "请输入表描述", trigger: "blur"}],
    moduleName: [{required: true, message: "请输入模块名", trigger: "blur"}],
    className: [{required: true, message: "请输入类名", trigger: "blur"}],
    requestMapping: [{required: true, message: "请输入requestMapping", trigger: "blur"}],
});

const state = reactive<{
    visible: boolean
    bindType: any[]
    fields: any[]
    dicts: any[]
    active: "无" | "BindField" | "BindFieldList" | "BindEntity" | "BindEntityList" | "BindDict",
}>({
    visible: false,
    bindType: [
        {value: "BindField", label: "BindField"},
        {value: "BindFieldList", label: "BindFieldList"},
        {value: "BindEntity", label: "BindEntity"},
        {value: "BindEntityList", label: "BindEntityList"},
        {value: "BindDict", label: "BindDict"},
    ],
    fields: [],
    dicts: [],
    active: "无",
});

function addField() {
    if (!api.editState.form.voFields) {
        api.editState.form.voFields = [];
    }
    api.editState.form.voFields.push({
        type: "String",
        name: "test",
    });
}

async function onBindNameChange(item: GenVoField, e: any) {
    item.bind = "com.icesoft.framework.core.binding.annotation." + e;
    if (e == "BindDict") {
        const params: AttachMore = {
            target: "dictionary",
            label: "itemName",
            value: "type",
            condition: {
                parentId: "0",
            },
        };
        const res = await api.attachMore([params]);
        state.dicts = res.data.dictionaryOptions;
        item.type = "java.lang.String";
    }
    state.active = e;
    item.conditionValue = undefined;
    item.entityClass = undefined;
    item.entity = undefined;
}

async function onEntitySelect(item: GenVoField, e: any) {
    item.field = undefined;
    state.fields = [];
    const res = await api.load(e);
    state.fields.push({
        commentName: "id",
        name: "id",
        type: "java.lang.String",
    });
    res.data?.fields?.forEach(filed => {
        state.fields.push(filed);
    });
    const entityClass = res.data?.packageName + ".entity." + res.data?.className;
    item.entity = res.data?.className;
    item.entityClass = entityClass;

    if (item.bindName == "BindField" || item.bindName == "BindEntity") {
        item.type = entityClass;
    }
    if (item.bindName == "BindFieldList" || item.bindName == "BindEntityList") {
        item.type = "java.util.List<" + entityClass + ">";
    }
    if (item.bindName == "BindDict") {
        item.type = "java.lang.String";
    }
}

async function onFieldChange(item: GenVoField, e: any) {
    item.conditionValue = "this.{}=" + item.field;
}

async function onDeleteField(index: number) {
    api.editState.form.voFields?.splice(index, 1);
}

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.editState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseEdit();
            }
        });
    }
}
</script>

<style lang="scss" scoped>

</style>
